<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
<script type="text/javascript"
	src="https://cdn.staticfile.org/jquery/1.12.3/jquery.min.js"></script>
</head>
<body>
	<h1>系统登录</h1>

	<form action="/login" method="post">
		<span>用户名称</span> <input type="text" name="username" /> <br> 
		<span>用户密码</span><input type="password" name="password" /> <br>
		<span>请输入验证码</span> <input type="text" name="verifycode"> 
		<a  href="javascript:;" id="vcode"><img id="vcodeImg" src="/getVerifyCode" alt="">看不清楚？换一张</a><br>
		<input type="button" value="登录" onclick="login()">
	</form>
</body>
<script type="text/javascript">

	//验证码事件绑定
	$('#vcode').click(function() {
		$('#vcodeImg').attr('src', '/getVerifyCode?t=' + new Date().getTime());
		$("input[name=verifycode]").val("");//清空历史验证码
	});
	
	function login() {
		var username = $("input[name='username']").val();
		var password = $("input[name='password']").val();
		var verifycode = $("input[name='verifycode']").val();
		//异步登录提交
		$.ajax({
			type : "post",
			url : "/login",
			data : {
				"username" : username,
				"password" : password,
				"verifycode" : verifycode
			},
			success : function(json) {
				console.log(JSON.stringify(json))
				if (json.ok) {
					location.href = "/";
				} else {
					alert(json.message)
					location.href = "/login.html";
				}
			},
			error : function(e) {

			}
		});
	}
</script>
</html>